<template>
  <div class="Toppadding">
      <my-head title="我的喜欢"></my-head>
     <div v-if="userInfo">
            <div v-if="likeLength" class="likeMain">

                <ul>
                    <li v-for="(item,index) in like" :key="index">
                         <img :src="item.shopImg" alt="">
                         <p class="van-multi-ellipsis--l3">{{item.shopTit}}</p>
                         <div class="likeMain_div" @click="delLike(index)"><van-icon name="delete" color='red' size='30' /></div>
                    </li>
                </ul>
            </div>

            <div v-else>
                <div class="failded">
                    <img src="@/assets/image/emptyx2.png" alt="">
                    <p>请去点赞喜欢的商品吧~~~</p>
                </div>
            </div>

      </div>
      

      <div v-else >
              <div class="failded">
                <img src="@/assets/image/emptyx2.png" alt="">
                <p>请先登录~~~</p>
              </div>
      </div>

  </div>
</template>

<script>
export default {
data() {
    return {
        likeLength:null,
        like:null,
    }
},
methods: {
    async getLike(){
      let res=await this.$ajax.findLike({
        phone:this.userInfo.phone
      })
      console.log(res);
      this.likeLength=res.length
      this.like=res
    
    },
    //点击取消点赞
    delLike(index){
        console.log(111);
 this.$ajax.delLike(this.like[index].id).then(res=>{
                        this.$toast("取消点赞成功")
                        this.getLike()
                    })
        
    }
},
mounted() {
    if(this.userInfo){
        this.getLike()
    }
    
},
}
</script>

<style>
.failded{
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
.failded{
  width: 200px;
  height: 200px;
  text-align: center;
  font-size:20px ;
}
.failded img{
  height: 100%;
  width: 100%;
}
.likeMain ul{
width: 100%;
}
.likeMain li{
    padding: 10px;
    width: 100%;
    margin-top: 5px;
    height: 120px;
    box-shadow: 2px 2px 5px #c5c4c4;
    border-radius: 10px;
    display: flex;
  justify-content: space-between;
  overflow: hidden;
  font-size: 16px;
}
.likeMain li img{
    height: 100px;
    width: 100px;
}
.likeMain p{
    width: calc(100% - 100px);
  height: 100%;
  padding-left:10px ;
  padding-top:10px ;
  color: #ff5687;
  overflow: hidden;
}
.likeMain_div{
    height: 30px;
    width: 30px;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
</style>